﻿@using PMS.Web.FrontUI
@using PMS.Web.Models.NaviMenus
@using PMS.Web.Models.Medias
@model NaviMenuEditModel
@{
    Layout = "_AdminHomeLayout";
    ViewData["Title"] = ViewBag.PageTitle as string;

    int maxImageUploadSize = ViewBag.MaxUploadSize;
    string acceptImageUploadExtNames = ViewBag.UploadExtNames as string;
    if (string.IsNullOrEmpty(acceptImageUploadExtNames))
    {
        acceptImageUploadExtNames = ".gif,.jpg,.jpeg,.png";
    }
    MediaUploadRequsetModel MediaUploadModel = new MediaUploadRequsetModel
    {
        Useage = ViewBag.Useage as string
    };

    var AvailableLayoutTemplateTypes = new List<SelectListItem>();
    foreach (var item in Html.GetEnumSelectList(typeof(LayoutTemplateType)))
    {
        AvailableLayoutTemplateTypes.Add(new SelectListItem
        {
            Text = item.Value.ToEnum<LayoutTemplateType>().GetDescription(true),
            Value = item.Value
        });
    }

    var AvailableUrlTargets = new List<SelectListItem>();
    foreach (var item in Html.GetEnumSelectList(typeof(LinkOpenMode)))
    {
        AvailableUrlTargets.Add(new SelectListItem
        {
            Text = item.Value.ToEnum<LinkOpenMode>().GetDescription(true),
            Value = item.Value
        });
    }
    var availableStoresJsonStr = Html.Convert2JavascriptJsonString(Model.AvailableStores, true);
    var availableLayoutTemplateJsonStr = Html.Convert2JavascriptJsonString(Model.AvailableLayoutTemplates, true);
    var availableCustomerRoleJsonStr = Html.Convert2JavascriptJsonString(Model.AvailableCustomerRoles);
}
@section CssLinks {
    <link rel="stylesheet" type="text/css" href="~/lib/jqueryPlugins/tagsInput/dist/jquery.tagsinput.min.css" />
}
@section CssStyles {
    <style type="text/css">
        .layui-tab-title {
            padding-left: 20px;
        }

        .layui-input-inline {
            width: 360px !important;
        }

        .layui-form-label {
            width: 130px !important;
        }

        .layui-input-block {
            margin-left: 130px !important;
        }

        .layui-slider-input {
            top: 0 !important;
        }

        #advancedOptions {
            height: 350px;
        }

        .orderSlider {
            padding-top: 15px;
        }
        .layui-upload .layui-upload-list,
        .layui-upload .pear-btn {
            float: left;
        }
        .layui-upload-list img {
            max-width: 330px;
        }
    </style>
}
<form class="layui-form" action="">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">必填配置</li>
            <li>页面配置</li>
        </ul>

        <div class="layui-tab-content">
            <!--必填配置-->
            <div class="layui-tab-item layui-show">
                <input class="layui-hide" type="text" name="@Model.NameOf(m => m.Id)" value="@Model.Id" />
                <input class="layui-hide" type="text" name="@Model.NameOf(m => m.MenuGroup)" value="@Model.MenuGroup" />
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.ParentId)</label>
                    <div class="layui-input-inline">
                        <select asp-for="ParentId" asp-items="@Model.AvailableParentMenus" lay-verify="required" lay-filter="ParentMenuSelect" lay-search>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.LanguageCode)</label>
                    <div class="layui-input-inline">
                        <select asp-for="LanguageCode" asp-items="@Model.AvailableLanguages" lay-verify="required" lay-filter="LanguageSelect">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.DisplayName)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="@Model.NameOf(m => m.DisplayName)" value="@Model.DisplayName" lay-verify="required|strLength20" placeholder="请输入栏目名称(必填)" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-mid layui-word-aux">不超过20字(必填)</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.SubTitle)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="@Model.NameOf(m => m.SubTitle)" value="@Model.SubTitle" lay-verify="strLength50" placeholder="请输入副标题名称(选填)" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-mid layui-word-aux">不超过50字(选填)</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.Description)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="@Model.NameOf(m => m.Description)" value="@Model.Description" lay-verify="strLength50" placeholder="请输入功能描述(选填)" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-mid layui-word-aux">不超过50字(选填)</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.LayoutTemplateType)</label>
                    <div class="layui-input-inline">
                        <select asp-for="LayoutTemplateType" asp-items="@AvailableLayoutTemplateTypes" lay-verify="required" lay-filter="LayoutTemplateTypeSelect">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.SelectedTemplateIds)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="@Model.NameOf(m => m.SelectedTemplateIds)" value="@(string.Join(',',Model.SelectedTemplateIds))" class="layui-hide" />
                        <div id="LayoutTemplateSelect" class="xmselect"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.DisplayOrder)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="@Model.NameOf(m => m.DisplayOrder)" value="@Model.DisplayOrder" class="layui-hide" />
                        <div id="DisplayOrderSlide" class="orderSlider"></div>
                    </div>
                </div>
                <div class="layui-form-item" id="moreOptionRow">
                    <label class="layui-form-label">高级配置</label>
                    <div class="layui-input-block">
                        <input type="checkbox" id="advancedOptionSwitch" lay-skin="switch" lay-text="开启|关闭" lay-filter="advancedOptionSwitchFilter">
                    </div>
                </div>
                <div id="advancedOptions" class="layui-hide">
                    <div class="layui-form-item">
                        <label class="layui-form-label">@Model.DisplayName(m => m.SelectedCustomerRoleIds)</label>
                        <div class="layui-input-inline">
                            <input type="text" name="@Model.NameOf(m => m.SelectedCustomerRoleIds)" value="@(string.Join(',',Model.SelectedCustomerRoleIds))" class="layui-hide" />
                            <div id="CustomerRoleSelect" class="xmselect"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">@Model.DisplayName(m => m.SelectedStoreIds)</label>
                        <div class="layui-input-inline">
                            <input type="text" name="@Model.NameOf(m => m.SelectedStoreIds)" value="@(string.Join(',',Model.SelectedStoreIds))" class="layui-hide" />
                            <div id="StoreIdsSelect" class="xmselect"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">@Model.DisplayName(m => m.UrlRoute)</label>
                            <div class="layui-input-inline">
                                <input type="text" name="@Model.NameOf(m => m.UrlRoute)" lay-verify="strLength200" placeholder="留空则根据系统规则自动配置" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">@Model.DisplayName(m => m.BeautifyUrlRoute)</label>
                            <div class="layui-input-inline" style="width: 100px !important;">
                                <input type="checkbox" id="BeautifyUrlRouteCheckbox" name="@Model.NameOf(m => m.BeautifyUrlRoute)" value="@(Model.BeautifyUrlRoute ? "true" : "false")" lay-skin="switch" lay-text="是|否" lay-filter="BeautifyUrlRouteFilter" @if (Model.BeautifyUrlRoute) { <text> checked</text> }>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">@Model.DisplayName(m => m.UrlTarget)</label>
                        <div class="layui-input-inline">
                            <select asp-for="UrlTarget" asp-items="@AvailableUrlTargets" lay-verify="required">
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <!--页面配置-->
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.ShowOnHomepage)</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="@Model.NameOf(m => m.ShowOnHomepage)" value="@(Model.ShowOnHomepage ? "true" : "false")" lay-skin="switch" lay-text="显示|隐藏" lay-filter="ShowOnHomepageSwitchFilter" @if (Model.ShowOnHomepage) { <text> checked</text> }>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.PageSize)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="@Model.NameOf(m => m.PageSize)" value="@Model.PageSize" lay-verify="number" placeholder="请选输入单页显示数量" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-mid layui-word-aux">如不输入，则设置为系统默认值</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.PageSizeOptions)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="@Model.NameOf(m => m.PageSizeOptions)" value="@Model.PageSizeOptions" lay-verify="strLength100" placeholder="请选输入单页可选显示数量" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-mid layui-word-aux">如不输入，则设置为系统默认值</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.IconImageModel)</label>
                    <div class="layui-input-inline">
                        <div class="layui-upload iconimage">
                            <button type="button" class="pear-btn pear-btn-primary" data-idsprefix="iconImage">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <div class="layui-form-mid layui-word-aux" style="margin-left: 15px;">允许上传最大图片: @(maxImageUploadSize/1024/1024)MB</div>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="iconImage" src="" />
                            </div>
                        </div>
                        <input type="text" class="layui-input layui-hide" id="iconImageId" name="IconImageModel.Id" value="@Model.IconImageModel.Id" data-imageurl="@Model.IconImageModel.ImageUrl" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.CoverImageModel)</label>
                    <div class="layui-input-inline">
                        <div class="layui-upload coverimage">
                            <button type="button" class="pear-btn pear-btn-primary" data-idsprefix="coverImage">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <div class="layui-form-mid layui-word-aux" style="margin-left: 15px;">允许上传最大图片: @(maxImageUploadSize/1024/1024)MB</div>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="coverImage" />
                            </div>
                        </div>
                        <input type="text" class="layui-input layui-hide" id="coverImageId" name="CoverImageModel.Id" value="@Model.CoverImageModel.Id" data-imageurl="@Model.CoverImageModel.ImageUrl" />
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>
                        <i class="layui-icon layui-icon-component"></i>SEO配置
                    </legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.MetaTitle)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="@Model.NameOf(m => m.MetaTitle)" value="@Model.MetaTitle" lay-verify="strLength400" placeholder="请选输入Seo标题" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.MetaKeywords)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="@Model.NameOf(m => m.MetaKeywords)" value="@Model.MetaKeywords" lay-verify="strLength400" placeholder="请选输入Seo关键字" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@Model.DisplayName(m => m.MetaDescription)</label>
                    <div class="layui-input-inline">
                        <textarea name="@Model.NameOf(m => m.MetaDescription)" value="@Model.MetaDescription" lay-verify="strLength500"  placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="width: 100%; height: 50px; line-height: 50px;"></div> <!--占位符，防止底部固定提交栏遮挡最下层区域-->
    <div class="layui-form-item footerbar">
        <div class="layui-input-block">
            <button class="pear-btn pear-btn-primary pear-btn-sm" id="menuEditSubmitBtn" lay-submit lay-filter="menuEditSubmitFilter">立即提交</button>
        </div>
    </div>
</form>

<input type="file" accept="@acceptImageUploadExtNames" id="imageFile" class="layui-hide" data-maxfilesize="@maxImageUploadSize" />

@section Scripts{
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jqueryPlugins/tagsInput/dist/jquery.tagsinput.min.js"></script>
    <script type="text/javascript">
        layui.use(['form', 'jquery', 'element', 'slider', 'lodash', 'popup', 'xmSelect', 'http'], function () {
            var form = layui.form,
                $ = layui.jquery,
                element = layui.element,
                slider = layui.slider,
                lodash = layui.lodash,
                popup = layui.popup,
                xmSelect = layui.xmSelect,
                http = layui.http;

            var lanDisplayNames = [];
            var groupMenus = [];
            var layoutTemplatesMultiple = false;  //是否允许“布局模板”多选框多选模板
            var initParentMenu = function () {
                $('#LanguageCode option').each(function (index, element) {
                    lanDisplayNames.push(element.text);
                });

                var selectedVal = $("#ParentId").val();
                for (var i = 0; i < lanDisplayNames.length; i++) {
                    groupMenus[i] = [];
                    var j = 0;
                    $('#ParentId option').each(function (index, element) {
                        if (element.value !== "0") {
                            var groupLabel = $(this).closest('optgroup').attr('label');
                            if (groupLabel === lanDisplayNames[i]) {
                                var elm = $(this).clone();
                                groupMenus[i][j] = elm;
                                j++;
                            }
                        }
                    });
                }

                addGroupedParentMenuOnLanguageChange(0, selectedVal);
            };

            // 根据切换语言装载对应语言下的Menu做为可选父级菜单选项
            // param: selectedIndex: LanguageSelect 对应的选中语言数组下标
            // param: defaultSelectedVal: 用于显示的默认菜单选项值，
            //        当前页面为对应菜单数据编辑页时，需要加载其默认的上级菜单
            //
            var addGroupedParentMenuOnLanguageChange = function (selectedIndex, defaultSelectedVal) {
                var $menuSelector = $("#ParentId");
                $menuSelector.empty();
                $menuSelector.append('<option value="0"> ---- </option>');
                var optGroup = $('<optgroup/>').attr('label', lanDisplayNames[selectedIndex]);
                lodash.forEach(groupMenus[selectedIndex], function (value, index) {
                    optGroup.append(value);
                });
                $menuSelector.append(optGroup);
                //$menuSelector.val("0");
                $menuSelector.val(defaultSelectedVal);
                form.render('select');
            };

            var initPageComponent = function () {
                //获取所有父节点菜单数据并按语言分组
                initParentMenu();
                //语言切换时设置对应语言的上级栏目菜单
                form.on('select(LanguageSelect)', function (data) {
                    var selectedIndex = $(':selected', data.elem).index();
                    addGroupedParentMenuOnLanguageChange(selectedIndex, "0");
                });
                form.on('select(ParentMenuSelect)', function (data) {
                    $("#ParentId").val(data.value);
                });
                form.on('select(LayoutTemplateTypeSelect)', function (data) {
                    //只有布局类型为DataLists即为列表时，模板可以多选
                    layoutTemplatesMultiple = PMSUtils.toInteger(data.value) == 1
                        ? true
                        : false;
                    templateSelector.setValue([]);
                    $("input[name=SelectedTemplateIds]").val("");
                });
                layoutTemplatesMultiple = $("#LayoutTemplateType option:selected").val() === "1";
                //页面布局模板下拉框
                var templatesData = @Html.Raw(availableLayoutTemplateJsonStr) ;
                var templateSelector = xmSelect.render({
                    el: '#LayoutTemplateSelect',
                    tips: '选择布局模板',
                    autoRow: true,
                    height: 'auto',
                    //clickClose: true,
                    layVerify: 'required',
                    layVerType: 'tips',
                    data: PMSUtils.isString(templatesData) ? $.parseJSON(templatesData) : templatesData,
                    toolbar: { show: true },
                    template({ item, sels, name, value }) {
                        var itemId = "ROW_SELECT_PREVIEW_IMG_" + value;
                        var rowContentHtml = '<div class="row-content">' +
                            '<i class="layui-icon layui-icon-picture-fine" id="' + itemId + '" data-preimgurl="' + item.templatepreviewimageurl + '" data-layerindex=""></i>'
                            + '<span style="color: #8799a3; margin-left: 10px;">'+ name +'</span></div>';
                        $("#" + itemId).hover(function () {
                            var preimgurl = $(this).data("preimgurl");
                            if (preimgurl.length > 0) {
                                var index = layer.tips('<img src="' + preimgurl + '" height="225" width="400"/>', this, {
                                    tips: [2, '#fff']
                                });
                                $(this).data("layerindex", index);
                            }
                        }, function () {
                                var index = $(this).data("layerindex");
                                if (index != "") {
                                    layer.close(index);
                                }
                                $(this).data("layerindex", "");
                        });
                        return rowContentHtml;
                    },
                    on: function (data) {
                        var arr = data.arr;       //arr:  当前多选已选中的数据
                        //var change = data.change; //change, 此次选择变化的数据,数组
                        var isAdd = data.isAdd;   //isAdd, 此次操作是新增还是删除
                        var curLayoutTemplateType = PMSUtils.toNumber($("#LayoutTemplateType option:selected").val());
                        if (arr.length > 1 && !layoutTemplatesMultiple) {
                            popup.failure("页面布局为“列表”才可多选");
                            var searchList = lodash.filter(arr, function (item, index) {
                                //页面布局为非“数据列表”时，页面布局模板只能选择非"数据列表"模板
                                return PMSUtils.toNumber(item.templatetype) == curLayoutTemplateType;
                            });
                            var selectedIdStr = lodash.reduce(searchList, function (sum, n) {
                                return sum + n.id + ",";
                            }, "");
                            $("input[name=SelectedTemplateIds]").val(lodash.trimEnd(selectedIdStr, ','));
                            return searchList;
                        }
                        if (isAdd) {
                            if (!layoutTemplatesMultiple && PMSUtils.toNumber(arr[0].templatetype) == 1) {
                                //页面布局为非“数据列表”时，页面布局模板只能选择非"数据列表"模板
                                popup.failure("当前选择页面布局模板只适用于“列表”布局");
                                $("input[name=SelectedTemplateIds]").val("");
                                return [];
                            }
                            if (layoutTemplatesMultiple) {
                                //针对 列表布局 页 每个类型页面模板只能选一个
                                var groupTemplates = lodash.groupBy(arr, 'templatetype');
                                var searchResult = lodash.find(groupTemplates, function (v, k) {
                                    return v.length > 1;
                                });
                                if (searchResult != undefined) {
                                    popup.failure("每个分类下的页面布局模板只能选择一个");
                                    $("input[name=SelectedTemplateIds]").val("");
                                    return [];
                                }
                            } else {
                                //针对选择了 非列表布局,只能选择对应布局类型下的模板
                                var curLayoutTemplateType = PMSUtils.toNumber($("#LayoutTemplateType option:selected").val());
                                if (PMSUtils.toNumber(arr[0].templatetype) !== curLayoutTemplateType) {
                                    popup.failure("当前选择页面布局模板不适用于当前页面布局");
                                    $("input[name=SelectedTemplateIds]").val("");
                                    return [];
                                }
                            }
                        }
                        var selectedIdStr = lodash.reduce(arr, function (sum, n) {
                            return sum + n.value + ",";
                        }, "");
                        $("input[name=SelectedTemplateIds]").val(lodash.trimEnd(selectedIdStr, ','));
                    },
                });

                slider.render({
                    elem: '#DisplayOrderSlide'  //绑定元素
                    , min: 1
                    , max: 200
                    , value: $("input[name=DisplayOrder]").val()
                    , input: true
                    , change: function (value) {
                        $("input[name=DisplayOrder]").val(value);
                    }
                });

                form.on('switch(advancedOptionSwitchFilter)', function (data) {
                    if (data.elem.checked) {
                        $("#advancedOptions").removeClass("layui-hide");
                    } else {
                        $("#advancedOptions").addClass("layui-hide");
                    }
                });
                //ACL Select
                var customerRoleData = @Html.Raw(availableCustomerRoleJsonStr) ;
                var aclSelector = xmSelect.render({
                    el: '#CustomerRoleSelect',
                    tips: '选择用户角色',
                    autoRow: true,
                    height: 'auto',
                    data: PMSUtils.isString(customerRoleData) ? $.parseJSON(customerRoleData) : customerRoleData,
                    toolbar: { show: true },
                    on: function (data) {
                        var arr = data.arr;       //arr:  当前多选已选中的数据
                        //var change = data.change; //change, 此次选择变化的数据,数组
                        var selectedIdStr = lodash.reduce(arr, function (sum, n) {
                            return sum + n.value + ",";
                        }, "");
                        $("input[name=SelectedCustomerRoleIds]").val(lodash.trimEnd(selectedIdStr, ','));
                    },
                });
                //归属店铺多选下拉框
                var storeData = @Html.Raw(availableStoresJsonStr) ;
                var storeSelector = xmSelect.render({
                    el: '#StoreIdsSelect',
                    tips: '选择店铺',
                    autoRow: true,
                    height: 'auto',
                    data: PMSUtils.isString(storeData) ? $.parseJSON(storeData) : storeData,
                    toolbar: { show: true },
                    on: function (data) {
                        var selectedStoreIds = lodash.map(data.arr, function (item) {
                            return PMSUtils.toNumber(item.value);
                        });
                        $("input[name=SelectedStoreIds]").val(lodash.join(selectedStoreIds));
                    }
                });

                //BeautifyUrlRoute
                if ($('#BeautifyUrlRouteCheckbox').is(':checked')) {
                    $("input[name=UrlRoute]").attr("readonly", "readonly");
                }
                form.on('switch(BeautifyUrlRouteFilter)', function (data) {
                    var $switchElm = $(data.elem),
                        $inputElm = $("input[name=UrlRoute]");
                    if (data.elem.checked) {
                        $switchElm.val("true");
                        $inputElm.val("");
                        $inputElm.attr("readonly", "readonly");
                    } else {
                        $switchElm.val("false");
                        $inputElm.removeAttr("readonly");
                    }
                });

                //前端显示
                form.on('switch(ShowOnHomepageSwitchFilter)', function (data) {
                    $(data.elem).val(data.elem.checked ? "true" : "false");
                });
                //PageSizeOptions InputTag
                $("input[name=PageSizeOptions]").tagsInput({
                    'width': 'auto',
                    'height': '33px',
                    'defaultText': '添加',
                    'removeWithBackspace': true,
                    'onAddTag': function (value) {
                        if (!PMSUtils.isNumber(value)) {
                            $(this).removeTag(value);
                            return;
                        }
                        var tagslist = lodash.split($(this).val(), ',');
                        if (tagslist.length > 5) {
                            popup.failure("数量限制不应超过5个");
                            $(this).removeTag(value);
                            return;
                        }
                    }
                });
                //MetaKeywords InputTags
                $("input[name=MetaKeywords]").tagsInput({
                    'width': 'auto',
                    'height': '80px',
                    'defaultText': '添加',
                    'removeWithBackspace': true,
                    'onAddTag': function (value) {
                        var tagslist = lodash.split($(this).val(), ',');
                        if (tagslist.length > 10) {
                            popup.failure("数量限制不应超过10个");
                            $(this).removeTag(value);
                            return;
                        }
                    }
                });

                //LoadImages
                $(".layui-upload").each(function () {
                    var $inputElem = $(this).next(".layui-input");
                    if ($inputElem.length > 0) {
                        var imageurl = $inputElem.data("imageurl");
                        if (imageurl.length > 0) {
                            $(this).find("img.layui-upload-img").attr('src', imageurl);
                        }
                    }
                    //bind upload image button events
                    $(this).find(".pear-btn").on("click", function () {
                        $("#imageFile").data("idsprefix", $(this).data('idsprefix'));
                        $("#imageFile").click();
                    });
                });

                $("#imageFile").on("change", function () {
                    var imgIdsPrefix = $(this).data("idsprefix");
                    var $imgElem = $("#" + imgIdsPrefix);
                    var $inputElem = $("#" + imgIdsPrefix + "Id");
                    var mediaUploadParam = @Html.Convert2JavascriptJsonString(MediaUploadModel, false) ;
                    if ($imgElem.length > 0 && $inputElem.length > 0) {
                        const MAXACCEPTFILESIZE = @maxImageUploadSize ;
                        // Image Preview
                        const files = this.files[0]; //files[0] - For getting first file
                        if (files) {
                            if (files.size > MAXACCEPTFILESIZE) {
                                popup.failure("上传图片过大,不允许上传");
                                return;
                            }
                            //Read File
                            const fileReader = new FileReader();
                            fileReader.addEventListener("load", function () {
                                // convert image to base64 encoded string
                                $imgElem.attr("src", this.result);
                            });
                            fileReader.readAsDataURL(files);
                            mediaUploadParam.File = files;
                            mediaUploadParam.Id = $inputElem.val();
                            mediaUploadParam.Title = "ArticleNaviMenu." + imgIdsPrefix;
                            var formData = new FormData();
                            //参数封装至FormData
                            layui.each(mediaUploadParam, function (key, value) {
                                value = typeof value === 'function' ? value() : value;
                                formData.append(key, value);
                            });
                            console.log(formData);
                            //http.postForm(backendwebapiConfig.commonuploadapi, formData, null).done(
                            //    function (response) {
                            //        if (response.state && response.state === 200) {
                            //            //upload api respond data as: {Id: mediaFileId, VirtualPath: mediaFileUrl}
                            //            popup.success("图片上传成功,记得点击保存", function () {
                            //                var serverImgUrl = response.data.VirtualPath + "?t=" + new Date().getTime();
                            //                $imgElem.attr("src", serverImgUrl);
                            //                $inputElem.val(response.data.Id);
                            //            });
                            //        }
                            //    }
                            //);
                        }
                    }
                });
            };

            initPageComponent();
            //页面初始使用tips提示
            layer.tips('下滑页面查看更多', '#moreOptionRow', {
                tips: 1
            });

            var maxlen = function (value, max) {
                if (value && value.length > max) {
                    return "最多输入" + max + "个字符";
                }
            };
            form.verify({
                strLength20: function (value) {
                    return maxlen(value, 20);
                },
                strLength50: function (value) {
                    return maxlen(value, 50);
                },
                strLength100: function (value) {
                    return maxlen(value, 100);
                },
                strLength200: function (value) {
                    return maxlen(value, 200);
                },
                strLength400: function (value) {
                    return maxlen(value, 400);
                },
                strLength500: function (value) {
                    return maxlen(value, 500);
                }
            });
            form.on('submit(menuEditSubmitFilter)', function (data) {
                var postData = data.field;
                if (PMSUtils.hasOwnProp(postData, "select")) {
                    PMSUtils.remove(postData, "select");
                }
                console.log(postData);
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
    </script>
}
